<template>
	<div class="box">
		<view class="nav">
			<view class="ops">
				<text class="hot active">热门</text>
				<text class="follow">关注</text>
			</view>
		</view>
		
		<view class="content">
			<view class="item-list">
				<view class="item" @click="toDetail">
					<view class="top">
						<view class="left">
							<image src="../../static/logo.png" mode=""></image>
							<view class="info">
								<text class="name">小青椒</text><br>
								<text class="time">1分钟前</text>
							</view>
						</view>
						<view class="follow">关注</view>
					</view>
					
					<view class="middle">
						<view class="sketch">
							阿杜毫无活动个阿善动撒奇偶嗲瑟吉欧ID骄傲搜ID骄傲搜ID骄傲四季都爱
							四季都爱四季豆下赛季哦阿杜毫无活动个阿善动撒奇偶嗲瑟吉欧ID骄傲搜ID骄傲搜ID
							骄傲四季都爱四季都爱四季豆下赛季哦
						</view>
						<view class="shows">
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
						</view>
					</view>
					
					<view class="bottom">
						<view class="opr">
							<view class="edit">
								<image src="../../static/img/temp.png" mode=""></image>
								<text>5</text>
							</view>
							
							<view class="like">
								<image src="../../static/img/temp.png" mode=""></image>
								<text>8</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="item" @click="toDetail">
					<view class="top">
						<view class="left">
							<image src="../../static/logo.png" mode=""></image>
							<view class="info">
								<text class="name">小青椒</text><br>
								<text class="time">1分钟前</text>
							</view>
						</view>
						<view class="follow">关注</view>
					</view>
					
					<view class="middle">
						<view class="sketch">
							阿杜毫无活动个阿善动撒奇偶嗲瑟吉欧ID骄傲搜ID骄傲搜ID骄傲四季都爱
							四季都爱四季豆下赛季哦阿杜毫无活动个阿善动撒奇偶嗲瑟吉欧ID骄傲搜ID骄傲搜ID
							骄傲四季都爱四季都爱四季豆下赛季哦
						</view>
						<view class="shows">
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
						</view>
					</view>
					
					<view class="bottom">
						<view class="opr">
							<view class="edit">
								<image src="../../static/img/temp.png" mode=""></image>
								<text>5</text>
							</view>
							
							<view class="like">
								<image src="../../static/img/temp.png" mode=""></image>
								<text>8</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="item" @click="toDetail">
					<view class="top">
						<view class="left">
							<image src="../../static/logo.png" mode=""></image>
							<view class="info">
								<text class="name">小青椒</text><br>
								<text class="time">1分钟前</text>
							</view>
						</view>
						<view class="follow">关注</view>
					</view>
					
					<view class="middle">
						<view class="sketch">
							阿杜毫无活动个阿善动撒奇偶嗲瑟吉欧ID骄傲搜ID骄傲搜ID骄傲四季都爱
							四季都爱四季豆下赛季哦阿杜毫无活动个阿善动撒奇偶嗲瑟吉欧ID骄傲搜ID骄傲搜ID
							骄傲四季都爱四季都爱四季豆下赛季哦
						</view>
						<view class="shows">
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
							<image src="../../static/logo.png" mode=""></image>
						</view>
					</view>
					
					<view class="bottom">
						<view class="opr">
							<view class="edit">
								<image src="../../static/img/temp.png" mode=""></image>
								<text>5</text>
							</view>
							
							<view class="like">
								<image src="../../static/img/temp.png" mode=""></image>
								<text>8</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Launch></Launch>
	</div>
</template>

<script>
	import Launch from "../launch/launch.vue"
	export default {
		components: {
			Launch
		},
		methods: {
			toDetail () {
				uni.navigateTo({
					url: "dynamicsInfo"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.nav {
			padding-top: 40rpx;
			display: flex;
			justify-content: center;
			background-color: #fff;
			
			.ops {
				display: flex;
				position: relative;
				
				text {
					font-size: $middleFont;
					color: $subColor;
					font-weight: bold;
					line-height: 2;
				}
				
				.hot {
					margin-right: $middleMargin;
				}
				
				.active {
					color: #333;
				}
				
				&::after {
					@include afterInit;
					background-color: $yellow;
					width: 63rpx;
					height: 3px;
					position: absolute;
					bottom: 1rpx;
					left: 0;
				}
			}
			
		}
	
		.content {
			margin-top: 2px;
			
			.item-list {
			
				.item {
					padding: $smallPad;
					padding-top: 36rpx;
					padding-bottom: 36rpx;
					margin-bottom: 18rpx;
					background-color: #fff;
					
					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.left {
							display: flex;
							
							& > image {
								width: $middlePortrait;
								height: $middlePortrait;
								border-radius: 50%;
							}
							
							.info {
								margin-left: 18rpx;
								text {
									font-size: $smallFont;
								}
								
								.name {
									font-weight: bold;
									color: #333;
								}
								
								.time {
									color: $subColor;
								}
							}
						}
						
						.follow {
							width: 123rpx;
							height: 58rpx;
							border-radius: 50px;
							line-height: 58rpx;
							background-color: $yellow;
							font-size: $smallFont;
							font-weight: bold;
							text-align: center;
						}
					}
				
					.middle {
						.sketch {
							font-size: $smallFont;
							text-indent: 2em;
							margin: 18rpx 0;
						}
						
						.shows {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							
							& > image {
								width: 210rpx;
								height: 210rpx;
								margin: 9rpx;
							}
						}
					}
					
					.bottom {
						margin-top: $middleMargin;
						padding: 0 18rpx;
						.opr {
							display: flex;
							justify-content: flex-end;
							
							& > view {
								box-sizing: border-box;
								width: 123rpx;
								height: 58rpx;
								border-radius: 50px;
								line-height: 58rpx;
								font-size: $smallFont;
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 0 30rpx;
							}
							
							image {
								width: $smallIcon;
								height: $smallIcon;
							}
							
							.edit {
								background-color: rgba(92, 172, 238, 0.73);
								margin-right: 18rpx;
							}
							
							.like {
								background-color: rgba(255, 181, 197, 0.73);
							}
						}
					}
				}
			}
		}
	}
</style>
